<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>员工信息修改</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a><a><cite>></cite></a><a><cite>员工管理</cite></a>
			<a><cite>></cite></a><a><cite>员工信息</cite></a><a><cite>></cite></a><a><cite>员工信息增加</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<div class="layui-upload">
			<div class="layui-tab layui-tab-brief">
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<form class="layui-form layui-form-pane">
								<div class="layui-form-item">
					                 <label class="layui-form-label">
					                     <span class='x-red'>*</span>员工名
					                 </label>
					                 <div class="layui-input-block">
					                     <input type="text" name="empName" id="empName" autocomplete="off" 
					                     class="layui-input" required="required">
					                 </div>
					            </div>
					            <div class="layui-form-item">
					                <label class="layui-form-label">
					                    <span class='x-red'>*</span>部门
					                </label>
					                <div class="layui-input-block">
					                    <select class="layui-select" name="deptNo" id="deptNo"></select>
					                </div>
					            </div>
					            <div class="layui-form-item">
					                <label class="layui-form-label">
					                    <span class='x-red'>*</span>学历
					                </label>
					                <div class="layui-input-block">
					                   <select class="layui-select" name="empXl" id="empXl"></select>
					                </div>
					            </div>
					            <div class="layui-form-item">
					                <label class="layui-form-label">
					                    <span class='x-red'>*</span>性别
					                </label>
					                <div class="layui-input-block">
					                    <select class="layui-select" name="empSex" id="empSex"></select>
					                </div>
					            </div>
					            <div class="layui-form-item">
					                <label class="layui-form-label">
					                    <span class='x-red'>*</span>身份证
					                </label>
					                <div class="layui-input-block">
					                    <input type="text" name="empID" id="empID" autocomplete="off"
					                    class="layui-input" required="required">
					                </div>
					            </div>
					            <div class="layui-form-item">
					                <label class="layui-form-label">
					                    <span class='x-red'>*</span>住址
					                </label>
					                <div class="layui-input-block">
					                    <input type="text" name="empAddress" id="empAddress" autocomplete="off"
					                    class="layui-input" required="required">
					                </div>
					            </div>
					            <div class="layui-form-item">
					                <label class="layui-form-label">
					                    <span class='x-red'>*</span>手机号
					                </label>
					                <div class="layui-input-block">
					                    <input type="number" name="empTel" id="empTel" autocomplete="off"
					                    class="layui-input" required="required">
					                </div>
					            </div>
					            <div class="layui-form-item">
					                <label class="layui-form-label">
					                    <span class='x-red'>*</span>邮箱
					                </label>
					                <div class="layui-input-block">
					                    <input type="email" name="empEmail" id="empEmail" autocomplete="off"
					                    class="layui-input" required="required">
					                </div>
					            </div>
					            <div class="layui-form-item">
					                <label class="layui-form-label">
					                    <span class='x-red'>*</span>职位
					                </label>
					                <div class="layui-input-block">
					                    <select class="layui-select" name="empJob" id="empJob"></select>
					                </div>
					            </div>
					            <div class="layui-form-item">
									<label for="link" class="layui-form-label">员工照片</label>
									<button type="button" class="layui-btn" id="test1" name="uploadfile">
										<i class="layui-icon">&#xe67c;</i>上传图片
									</button>
									<div class="layui-upload-list">
										<label for="link" class="layui-form-label">预览图</label>
										<img class="layui-upload-img" id="demo1" width="100px" height="100px">
										<p id="demoText"></p>
									</div>
								</div>
									<button type="button" class="layui-btn" id="submit">添加</button>
		   					</form>
		   				</div>
		   			</div>
		   		</div>
			</div>
	<div style="height: 100px;"></div>
	</div>
		
    <script src="./js/jquery-2.0.3.js" charset="utf-8"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	
	<script type="text/javascript">
		layui.use(['upload','form','element'], function(){
		    var $ = layui.jquery
		    ,upload = layui.upload;
		  //增加员工信息
			var uploadInst = upload.render({
			    elem: '#test1'
			    ,url: 'UploadServlet' //改成您自己的上传接口
			    ,accept: 'images'
			    ,field: 'upload'
			    ,auto: false
			    ,bindAction: '#submit'
			    ,before: function(){
			      this.data = {
	    		    empName : $('input[name = "empName"]').val(),
					deptNo : $('select[name = "deptNo"]').val(),
					empXl : $('select[name = "empXl"]').val(),
					empSex : $('select[name = "empSex"]').val(),
					empID : $('input[name = "empID"]').val(),
					empAddress : $('input[name = "empAddress"]').val(),
					empTel : $('input[name = "empTel"]').val(),
					empEmail : $('input[name = "empEmail"]').val(),
					empJob : $('select[name = "empJob"]').val(),
					op : "add",
					servlet : 'EmpServlet'
			      }
			    }
			    ,choose: function(obj){
			   		obj.preview(function(index, file, result){
			 		  $('#demo1').attr('src', result); //图片链接（base64）
			 		});
			    }
			    ,done: function(res){
			      if(res.code == 200){
			    	  layer.msg("添加成功!",{icon:6,time:1000});
		                setTimeout(function(){
		                    window.parent.location.reload();
		                    var index = parent.layer.getFrameIndex(window.name);
		                    parent.layer.close(index);
		                },1000);
		                return false;
					} else {
						layer.msg("添加失败!",{icon:5,time:2000});
						return false;
					}
			    },error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#demoText');
			      demoText.html('<span style="color: #FF5722;">上传失败,图片格式错误</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
		  });
		});
		
		var xl = ["本科","研究生","硕士","博士","其它"];
		var sex = ["男","女"];
		
		$(function(){
			
			$.each(xl,function(i,o){
				$("#empXl").append("<option value = "+o+">"+o+"</option>");
			})
			$.each(sex,function(i,o){
				$("#empSex").append("<option value = "+o+">"+o+"</option>");
			})
			
			$("#empID").blur(function(){
				regCheckID();
			});
			
			$("#empTel").blur(function(){
				regCheckTel();
			});
			
			$("#empEmail").blur(function(){
				regCheckEmail();
			});
		})
		
		function regCheckID(){
			var cardID = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
			var ID = $('input[name = "empID"]').val();
			if(!cardID.test(ID)){
				layer.msg("身份证格式错误!",{icon:5,time:2000});
			}
		}
		function regCheckTel(){
			var phoneNum = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
			var Tel = $('input[name = "empTel"]').val();
			if(!phoneNum.test(Tel)){
				layer.msg("手机号格式错误!",{icon:5,time:2000});
			}
		}
		function regCheckEmail(){
			var email = /^([A-Za-z0-9_\-\.])+\@(163.com|qq.com|42du.cn)$/;
			var eEmail = $('input[name = "empEmail"]').val();
			if(!email.test(eEmail)){
				layer.msg("邮箱格式错误!",{icon:5,time:2000});
			}
		}
	
	</script>
	
	<script type="text/javascript">
		var job = ["员工","主管","教员"];
		$(function(){
			$.get("DeptServlet?op=ajaxDept", function(data) {
				//jQuery的遍历
				$.each(data, function(i, o) {
					console.log(o);
					$("#deptNo").append("<option value="+o.deptNo+">" + o.deptName + "</option>");
				});
			});
			
			$.each(job,function(i,o){
				$("#empJob").append("<option value = "+o+">"+o+"</option>");
			})
			
		});
	</script>
</body>
</html>